

<template>
  <div>

    
    <!-- 全屏上升翻滚方形 -->
    <div class="positionFixed around0">
      <div class="area">
        <ul class="circles">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    
    <div class="context noselect">
      <h1>Notes Admin</h1>
      <div class="rowCenter">
        <div style="width: 400px; max-width: 80%;" class="bgColorWhiteOpacity01 padding10 radius15">
          <div>
            <label class="rowStartAlignCenter padding10">
              <div class="paddingRight5">
                <svg style="display: flex;" t="1724806863116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="930" width="25" height="25"><path d="M607.061333 551.125333a207.957333 207.957333 0 0 0 87.893334-171.008C694.912 264.704 602.88 170.666667 489.941333 170.666667 377.045333 170.666667 286.378667 264.704 286.378667 378.709333c0 71.253333 34.858667 133.973333 87.850666 171.008A325.76 325.76 0 0 0 170.666667 853.333333h57.173333c0-136.789333 101.76-249.472 231.466667-265.173333 1.365333 0 36.266667-2.816 65.493333 0h2.816c126.890667 18.56 224.469333 129.706667 224.469333 265.045333H810.666667c-1.408-136.789333-85.034667-255.061333-203.605334-302.08z m-117.077333-15.658666c-85.077333 0-153.386667-69.845333-153.386667-156.757334s68.309333-156.757333 153.386667-156.757333c85.034667 0 153.344 69.845333 153.344 156.757333s-68.266667 156.757333-153.344 156.757334z" fill="#ffffff" p-id="931"></path></svg>
              </div>
              <div class="flexAuto">
                <input autocomplete="off" type="text" class="inputTM width100pct colorDEDEDE" placeholder="请输入用户名" v-model="FormData.u"/>
              </div>
            </label>
            <label class="rowStartAlignCenter padding10">
              <div class="paddingRight5">
                <svg style="display: flex;" t="1724806921155" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1282" width="25" height="25"><path d="M304 416.426667V361.813333C304 256.256 387.584 170.666667 490.666667 170.666667s186.666667 85.589333 186.666666 191.146666v54.613334h53.333334c44.202667 0 80 36.693333 80 81.92v273.066666c0 45.226667-35.84 81.92-80 81.92H250.666667C206.464 853.333333 170.666667 816.64 170.666667 771.413333v-273.066666c0-45.226667 35.84-81.92 80-81.92h53.333333z m53.333333 0h266.666667V361.813333c0-75.392-59.733333-136.533333-133.333333-136.533333-73.642667 0-133.333333 61.141333-133.333334 136.533333v54.613334z m373.333334 382.293333a27.008 27.008 0 0 0 26.666666-27.306667v-273.066666c0-15.061333-11.946667-27.306667-26.666666-27.306667H250.666667a27.008 27.008 0 0 0-26.666667 27.306667v273.066666c0 15.061333 11.946667 27.306667 26.666667 27.306667h480z m-266.666667-218.453333c0-15.061333 11.946667-27.306667 26.666667-27.306667s26.666667 12.245333 26.666666 27.306667v109.226666c0 15.061333-11.946667 27.306667-26.666666 27.306667a27.008 27.008 0 0 1-26.666667-27.306667V580.266667z" fill="#ffffff" p-id="1283"></path></svg>
              </div>
              <div class="flexAuto">
                <input autocomplete="off" type="password" class="inputTM width100pct colorDEDEDE" placeholder="请输入密码" v-model="FormData.p"/>
              </div>
            </label>
          </div>
        </div>
      </div>
      <div class="rowCenter paddingCol20 opacity70" @click="clickSubmit">
        <svg t="1724807188275" class="icon cursorPointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1504" width="50" height="50"><path d="M744.704 743.765333A327.509333 327.509333 0 1 0 281.685333 280.405333a327.509333 327.509333 0 0 0 463.018667 463.36z m39.296 39.253334A384 384 0 1 1 240 240.938667a384 384 0 0 1 544 542.165333z m-110.250667-399.317334a28.458667 28.458667 0 1 1 39.765334 39.765334l-220.458667 220.458666a32.981333 32.981333 0 0 1-45.184 0l-125.568-124.714666a28.458667 28.458667 0 1 1 39.765333-39.722667l105.685334 107.946667 205.994666-203.733334z" fill="#ffffff" p-id="1505"></path></svg>
      </div>
    </div>

  </div>
</template>

<style>
    .inputTM {
      background-color: transparent;
      border: none;
    }
    .inputTM:focus {
      outline: none;
    }
    .inputTM::placeholder {
      color: #ccc;
    }

    .context {
        width: 100%;
        position: absolute;
        top: 10vh;
    }

    .context h1 {
        text-align: center;
        color: #fff;
        font-size: 50px;
    }


    .area {
        background: #4e54c8;
        background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
        width: 100%;
        height: 100vh;


    }

    .circles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .circles li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: animate 25s linear infinite;
        bottom: -150px;

    }

    .circles li:nth-child(1) {
        left: 25%;
        width: 80px;
        height: 80px;
        animation-delay: 0s;
    }


    .circles li:nth-child(2) {
        left: 10%;
        width: 20px;
        height: 20px;
        animation-delay: 2s;
        animation-duration: 12s;
    }

    .circles li:nth-child(3) {
        left: 70%;
        width: 20px;
        height: 20px;
        animation-delay: 4s;
    }

    .circles li:nth-child(4) {
        left: 40%;
        width: 60px;
        height: 60px;
        animation-delay: 0s;
        animation-duration: 18s;
    }

    .circles li:nth-child(5) {
        left: 65%;
        width: 20px;
        height: 20px;
        animation-delay: 0s;
    }

    .circles li:nth-child(6) {
        left: 75%;
        width: 110px;
        height: 110px;
        animation-delay: 3s;
    }

    .circles li:nth-child(7) {
        left: 35%;
        width: 150px;
        height: 150px;
        animation-delay: 7s;
    }

    .circles li:nth-child(8) {
        left: 50%;
        width: 25px;
        height: 25px;
        animation-delay: 15s;
        animation-duration: 45s;
    }

    .circles li:nth-child(9) {
        left: 20%;
        width: 15px;
        height: 15px;
        animation-delay: 2s;
        animation-duration: 35s;
    }

    .circles li:nth-child(10) {
        left: 85%;
        width: 150px;
        height: 150px;
        animation-delay: 0s;
        animation-duration: 11s;
    }



    @keyframes animate {

        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
            border-radius: 0;
        }

        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
            border-radius: 50%;
        }

    }
</style>

<script>
import { apiLogin } from '@/api/admin'
export default {
    data () {
        return {
          FormData: {
            u: 'admin',
            p: ''
          }
        }
    },
    methods: {
        async clickSubmit () {
            this.fn.clog('clickSubmit()')
            let f = this.FormData
            if (f.u === '') {
              // 允许空密码
              return this.fn.eWarning('请输入账号密码')
            }
            apiLogin(f).then(apiRes => {
              this.fn.clog('apiRes: ', apiRes)
              if (apiRes.code === 0) {
                this.fn.eWarning(apiRes.msg)
              } else {
                this.$store.dispatch('t', apiRes.data.token)
                this.fn.alertAndHome('登录成功', 'success')
              }
            }).catch(e => {
              this.fn.clog('登录失败', e)
              this.fn.eError(e)
            })
        }
    },
    mounted () {
        this.fn.clog('[Page] login')

        // 如果已经登录，跳转首页
        if (this.$store.getters.isLogin) {
            return this.fn.goHome()
        }

    }
}
</script>